<template>
  <view class="personal-info-page">

    
    <!-- 个人信息列表 -->
    <view class="info-list">
      <!-- 头像 -->
      <view class="info-item" @click="showAvatarOptions">
        <text class="item-label">头像</text>
        <view class="item-content">
          <image class="avatar" src="/static/default-avatar.png" mode="aspectFill"></image>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 用户名 -->
      <view class="info-item" @click="showUsernameTip">
        <text class="item-label">用户名</text>
        <view class="item-content">
          <text class="item-value">715627319</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 昵称 -->
      <view class="info-item" @click="editNickname">
        <text class="item-label">昵称</text>
        <view class="item-content">
          <text class="item-value">{{ nicknameValue }}</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 性别 -->
      <view class="info-item" @click="showGenderOptions">
        <text class="item-label">性别</text>
        <view class="item-content">
          <text class="item-value">{{ genderValue }}</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 出生日期 -->
      <view class="info-item" @click="showDatePicker">
        <text class="item-label">出生日期</text>
        <view class="item-content">
          <text class="item-value">{{ birthdayValue }}</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 头像选择底部弹出菜单 -->
    <view class="action-sheet-overlay" v-if="showAvatarSheet" @click="hideAvatarOptions"></view>
    <view class="action-sheet-container" v-if="showAvatarSheet">
      <!-- 上部分容器：拍照和相册 -->
      <view class="action-sheet-main">
        <view class="action-sheet-item" @click="takePhoto">
          <text class="action-sheet-text">拍照</text>
        </view>
        <view class="action-sheet-divider"></view>
        <view class="action-sheet-item" @click="chooseFromAlbum">
          <text class="action-sheet-text">我的相册</text>
        </view>
      </view>
      
      <!-- 下部分容器：取消 -->
      <view class="action-sheet-cancel">
        <view class="action-sheet-item" @click="hideAvatarOptions">
          <text class="action-sheet-text">取消</text>
        </view>
      </view>
    </view>

    <!-- 性别选择底部弹出菜单 -->
    <view class="action-sheet-overlay" v-if="showGenderSheet" @click="hideGenderOptions"></view>
    <view class="action-sheet-container" v-if="showGenderSheet">
      <!-- 上部分容器：性别选项 -->
      <view class="action-sheet-main">
        <view class="action-sheet-item" @click="selectGender('男')">
          <text class="action-sheet-text">男</text>
        </view>
        <view class="action-sheet-divider"></view>
        <view class="action-sheet-item" @click="selectGender('女')">
          <text class="action-sheet-text">女</text>
        </view>
        <view class="action-sheet-divider"></view>
        <view class="action-sheet-item" @click="selectGender('保密')">
          <text class="action-sheet-text">保密</text>
        </view>
      </view>
      
      <!-- 下部分容器：取消 -->
      <view class="action-sheet-cancel">
        <view class="action-sheet-item" @click="hideGenderOptions">
          <text class="action-sheet-text">取消</text>
        </view>
      </view>
    </view>

    <!-- 日期选择器 -->
    <DatePicker 
      :visible="showDatePickerVisible" 
      :value="currentDate"
      @cancel="hideDatePicker"
      @confirm="confirmDate"
    />
  </view>
</template>

<script>
import DatePicker from '@/components/DatePicker/DatePicker.vue'

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      showActionSheet: false,
      showGenderSheet: false,
      showAvatarSheet: false,
      showDatePickerVisible: false,
      genderValue: '保密',
      birthdayValue: '2008.08.18',
      currentDate: '2008-08-18',
      nicknameValue: '小亮'
    }
  },
  onShow() {
    // 页面显示时检查是否有更新的昵称
    // 使用全局变量或本地存储来传递数据
    const updatedNickname = uni.getStorageSync('updatedNickname');
    if (updatedNickname) {
      this.nicknameValue = updatedNickname;
      uni.removeStorageSync('updatedNickname');
    }
  },
  methods: {
    // 显示头像选择菜单
    showAvatarOptions() {
      this.showAvatarSheet = true;
    },
    
    // 隐藏头像选择菜单
    hideAvatarOptions() {
      this.showAvatarSheet = false;
    },
    
    // 拍照
    takePhoto() {
      uni.chooseImage({
        count: 1,
        sourceType: ['camera'],
        success: (res) => {
          // 处理拍照结果
          console.log('拍照成功:', res.tempFilePaths);
          // 这里可以上传图片到服务器或更新本地头像
          this.hideAvatarOptions();
        },
        fail: (err) => {
          console.log('拍照失败:', err);
          this.hideAvatarOptions();
        }
      });
    },
    
    // 从相册选择
    chooseFromAlbum() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: (res) => {
          // 处理相册选择结果
          console.log('选择图片成功:', res.tempFilePaths);
          // 这里可以上传图片到服务器或更新本地头像
          this.hideAvatarOptions();
        },
        fail: (err) => {
          console.log('选择图片失败:', err);
          this.hideAvatarOptions();
        }
      });
    },
    
    // 编辑昵称
    editNickname() {
      uni.navigateTo({
        url: '/pages/kzPersonalInformation/kzEditNickname',
        success: (res) => {
          // 传递当前昵称到编辑页面
          res.eventChannel.emit('passNickname', {
            nickname: this.nicknameValue
          });
        }
      });
    },

    // 显示用户名提示
    showUsernameTip() {
      uni.showToast({
        title: '用户名不可修改',
        icon: 'none',
        duration: 2000
      });
    },

    // 显示性别选择菜单
    showGenderOptions() {
      this.showGenderSheet = true;
    },

    // 隐藏性别选择菜单
    hideGenderOptions() {
      this.showGenderSheet = false;
    },

    // 选择性别
    selectGender(gender) {
      this.genderValue = gender;
      this.hideGenderOptions();
    },

    // 显示日期选择器
    showDatePicker() {
      this.showDatePickerVisible = true;
    },

    // 隐藏日期选择器
    hideDatePicker() {
      this.showDatePickerVisible = false;
    },

    // 确认日期选择
    confirmDate(date) {
      // 格式化日期显示
      const dateObj = new Date(date);
      const year = dateObj.getFullYear();
      const month = String(dateObj.getMonth() + 1).padStart(2, '0');
      const day = String(dateObj.getDate()).padStart(2, '0');
      
      this.birthdayValue = `${year}.${month}.${day}`;
      this.currentDate = date;
      this.hideDatePicker();
      
      // 可以在这里保存到服务器
      console.log('选择的日期:', date);
    }
  }
}
</script>

<style lang="scss">
  .personal-info-page {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 20rpx;
    
    .page-header {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
      border-bottom: 1rpx solid #f1f1f1;
      
      .header-title {
        font-size: 34rpx;
        font-weight: 500;
        color: #333;
      }
    }
    
    .info-list {
      margin-top: 20rpx;
      background-color: #fff;
      
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .item-label {
          font-size: 30rpx;
          color: #333;
        }
        
        .item-content {
          display: flex;
          align-items: center;
          
          .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
            background-color: #eee; // 默认背景色
          }
          
          .item-value {
            font-size: 28rpx;
            color: #666;
            margin-right: 20rpx;
          }
        }
      }
    }

    // 底部弹出菜单样式
    .action-sheet-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    .action-sheet-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
    }

    .action-sheet-main {
      background-color: #fff;
      border-radius: 20rpx;
      overflow: hidden;
    }

    .action-sheet-divider {
      height: 1rpx;
      background-color: #f0f0f0;
      margin: 0;
    }

    .action-sheet-cancel {
      background-color: #fff;
      border-radius: 20rpx;
      overflow: hidden;
    }

    .action-sheet-item {
      height: 110rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .action-sheet-text {
        font-size: 32rpx;
        color: #007aff;
        font-weight: 400;
      }
    }
  }
</style>
